import { memo, useEffect } from "react";
import { useDnD } from "../context/DnDContext";
import RagNode from "./RagNode";
import { useRequest } from "ahooks";
import { projectList } from "@/api/request";

// 节点分类配置
const NODE_CATEGORIES = {
    '': [
    ]
};

const Workflow = () => {
    const [_, setType] = useDnD();
    const { run: projectListRun, data: projectListData } = useRequest(projectList, {
        manual: true
    })

    const onDragStart = (event: React.DragEvent<HTMLDivElement>,
        nodeType: NodeType, id: number, projectName: string) => {
        setType && setType(nodeType);
        event.dataTransfer.effectAllowed = "move";
        event.dataTransfer.setData("projectId", id + "");
        event.dataTransfer.setData("projectName", projectName);
    };

    useEffect(() => {
        projectListRun()
    }, [])

    return (
        <div className="max-h-[600px] overflow-auto">
            <h3 className="text-[14px] font-medium mb-5">工作流</h3>
            <div className="grid grid-cols-1 gap-2">
                {projectListData?.data?.map((node) => (
                    <RagNode
                        key={node.id}
                        text={node.name}
                        illustrate={node.describe}
                        imgUrl="img/ai.webp"
                        onDragStart={(event) => onDragStart(event, "workflowNode", node.id, node.name)}
                    />
                ))}
            </div>
        </div>
    );
};

export default memo(Workflow);